<template>
  <div class="tab-bar">
  <!-- <h2>tab-bar</h2> -->
    <!-- <template v-for="(item, index) in tabbarData" :key="index">
      <div class="tab-bar-item" 
        @click="itemClick(index, item)"
        :class="{ active: currentIndex === index }">
        <img v-if="currentIndex !== index" :src="getAssetURL(item.img)" alt=""></img> 在webpack里面可以使用 :src="require(item.img) 来读取,但是在vite里面不可以"
        <img v-else="currentIndex === index" :src="getAssetURL(item.activeImg)" alt=""></img> 
        <span class="text">{{ item.text }}</span>
      </div> 
    </template> -->
  
    <!--vant开发tabbar-->
  <!--基础用法-->
    <!-- <van-tabbar v-model="active">
      <van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>
      <van-tabbar-item name="search" icon="search">标签</van-tabbar-item>
      <van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>
      <van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>
    </van-tabbar> -->

  <!--自定义-->
  <!-- <div class="tab-bar-item"> -->
    <van-tabbar v-model="currentIndex" active-color="#1989fa">
      <template v-for="(item, index) in tabbarData">
        <van-tabbar-item :to="item.path" > 
          <span>{{ item.text }}</span>
          <template #icon>
            <!--具名插槽（Named Slots） <template #icon> 是 v-slot:icon的简写形式-->
            <!-- <img :src="props.currentIdex ? icon.currentIdex : icon.inactive"/> -->
            <!-- <img v-if="currentIndex !== index" :src="getAssetURL(item.img)" alt=""></img> -->
            <!-- <img v-else="currentIndex === index" :src="getAssetURL(item.activeImg)" alt=""></img>  -->
            <!--使用 v-show 替代 v-if/v-else-->
            <!--如果图标状态频繁切换（如 tabbar 激活状态变化），使用 v-show 会更高效-->

            <img v-show="currentIndex !== index" :src="getAssetURL(item.img)" alt="">
            <img v-show="currentIndex === index" :src="getAssetURL(item.activeImg)" alt=""> 
          </template>
        </van-tabbar-item>
      </template>
    </van-tabbar>



  <!-- </div> -->
  

  </div>
</template>

<script setup>
  import { ref } from "vue"
  import { useRouter } from "vue-router";

  import tabbarData from "@/assets/data/tabbar.js";
  import { getAssetURL } from "@/utils/loade_assets.js";
  const router = useRouter();

  const currentIndex = ref(0);
  // function itemClick(index, item) {
    // currentIndex.value = index;
    // console.log(item.path);
    // router.push(item.path)
  // }
</script>

<style lang="less" scoped>
  .tab-bar {
    /*方式一:局部修改 字体图标*/
    // --van-tabbar-item-icon-size: 30px !important;
    // 方式二: 找到类,对类中的css属性重写  字体图标
    // :deep(.class)找到子组件的类,对子组件的类中的css属性重写
    // :deep(.van-tabbar-item__icon){
    //   font-size: 30px;
    // }
    .van-tabbar-item__icon img{
      height: 36px;
    }
  }
</style>